<!--
 * @Descripttion: 
 * @version: 
 * @Author: chenWeiLong
 * @Date: 2022-03-11 22:53:33
 * @LastEditors: please set LastEditors
 * @LastEditTime: 2022-03-12 00:14:08
-->
<template>
  <div class="todo">
    <div style="display:flex">
      <el-input type="text" v-model="value" />
      <el-button type="primary" plain @click="add">添加</el-button>
    </div>
    <br />
    <br />

    <ul>
      <li
        v-for="item, index in arr"
        :key="index"
        @click="act(index)"
        :class="{ 'active': item.style, 'state': item.state }"
      >
        <input type="checkbox" :checked="item.checked" @change="item.checked = !item.checked" />
        <p>
          <span>{{ index + 1 }}</span>
          <span :class="item.state ? 'del' : ''">{{ item.content }}</span>
          <span @click="del(index)" style="color:red">X</span>
        </p>
      </li>
    </ul>
    <div style="display:flex;justify-content:space-around;align-items:center">
      <span>剩余{{ shengyu }}项</span>
      <el-button type="primary" @click="wancheng(false)">全部</el-button>
      <el-button type="success" @click="wancheng(false)">待完成</el-button>
      <el-button type="danger" @click="wancheng(true)">完成</el-button>
      <el-button type="warning" @click="del('all')">清除完成</el-button>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { log } from "console";
import { ref, reactive, computed } from "vue";
let arr = reactive([
  { state: false, content: "第一条数据", style: false, checked: false },
  { state: false, content: "第二条数据", style: false, checked: false },
  { state: true, content: "第san条数据", style: false, checked: false },
]);
let value = ref("");
const add = () => {
  if (value.value == "") return;
  arr.push({
    state: false,
    content: value.value,
    style: false,
    checked: false,
  });
};

const del = (index: any) => {
  if (index === "all") {
    let arr1 = arr.filter((item) => !item.state);
    arr.length = 0;
    arr.push(...arr1);
  } else {
    console.log(index);

    arr.splice(index, 1);
  }
};
const act = (index: number) => {
  arr.map((item) => (item.style = false));
  arr[index].style = true;
};

const wancheng = (bool: boolean) => {
  arr.map((item) => {
    if (item.checked === true) {
      item.state = bool;
    }
  });
};
let shengyu = computed(() => {
  return arr.reduce((pre, next) => {
    return pre + (next.state ? 0 : 1);
  }, 0);
});
</script>
<style lang='less' scoped>
.state span {
  text-decoration: line-through;
}
.todo {
  width: 500px;
  display: flex;
  flex-direction: column;
  li {
    padding: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      width: 40px;
    }
    p {
      flex: 1;
      display: flex;
      span {
        flex: 1;
      }
      span:nth-child(2) {
        width: 100px;
        margin-right: 10px;
      }
      span:nth-child(3) {
        text-decoration: none !important;
        // color: aqua !important;
      }
    }
  }
}
.active {
  background: yellow;
}
</style>